<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 列表</title>
    <style type="text/css">
        ul{
            list-style-type: square;
            list-style-image: url("../images/eg_cute.gif");
            list-style-position: inside;  /* 标志出现在列表项内容之外还是内容内部*/
            /*list-style : url(example.gif) square inside*/  /*  也可以试用一句 结合进去 设置图片后 之前的square等就没生效了 */
        }

        ol.decimal {list-style-type: decimal}
        ol.lroman {list-style-type: lower-roman}
        ol.uroman {list-style-type: upper-roman}
        ol.lalpha {list-style-type: lower-alpha}
        ol.ualpha {list-style-type: upper-alpha}

        ul.inside
        {
            list-style-position: inside
        }

        ul.outside
        {
            list-style-position: outside
        }
    </style>
</head>
<body>
<p>无序列表基本简介</p>
<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>
<ol class="decimal">
    <li>咖啡</li>
    <li>茶</li>
    <li>可口可乐</li>
</ol>

<ol class="lroman">
    <li>咖啡</li>
    <li>茶</li>
    <li>可口可乐</li>
</ol>

<ol class="uroman">
    <li>咖啡</li>
    <li>茶</li>
    <li>可口可乐</li>
</ol>

<ol class="lalpha">
    <li>咖啡</li>
    <li>茶</li>
    <li>可口可乐</li>
</ol>

<ol class="ualpha">
    <li>咖啡</li>
    <li>茶</li>
    <li>可口可乐</li>
</ol>
<p>该列表的 list-style-position 的值是 "inside"：</p>
<ul class="inside">
    <li>Earl Grey Tea - 一种黑颜色的茶</li>
    <li>Jasmine Tea - 一种神奇的“全功能”茶</li>
    <li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>

<!--  bia-->
<p>该列表的 list-style-position 的值是 "outside"：</p>
<ul class="outside">
    <li>Earl Grey Tea - 一种黑颜色的茶</li>
    <li>Jasmine Tea - 一种神奇的“全功能”茶</li>
    <li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
</body>
</html>